# 报价详情页 - TAPD需求文档

需求背景（补充业务场景与触发原因）：

后台管理系统需要提供报价详情查看功能，让管理员能够查看系统中任意报价的详细信息。管理员在处理需求、管理报价、跟踪业务进度时，需要能够快速查看报价的完整信息，包括报价单号、报价状态、关联需求、报价金额、报价明细、客户信息、创建顾问、有效期、备注说明、客户操作记录等关键信息。目前管理员无法在一个页面中全面了解报价的完整信息，需要多个页面跳转或联系顾问询问，沟通成本高，管理效率低。需要一个报价详情页面，让管理员能够全面了解报价的完整信息，支持快速定位关联需求和客户信息，提升报价管理效率和业务决策能力。

需求价值（补充对业务的价值）：

1. **提升报价管理效率**：通过报价详情页面，管理员可以快速查看报价的完整信息，包括报价明细、报价金额、客户信息、创建顾问等，无需多个页面跳转，大幅提升管理效率。
2. **支持业务决策**：通过详细的报价信息展示，管理员可以全面了解报价的构成、客户情况、顾问信息等，支持业务决策和资源调配。
3. **建立透明的报价管理机制**：通过报价明细展示，让管理员清晰了解报价的构成，包括每个服务项目的价格，建立透明的报价管理机制。
4. **支持快速定位关联信息**：通过关联需求和客户信息的快速跳转，管理员可以快速查看相关需求详情和客户详情，提升信息查找效率。
5. **支持业务数据分析**：通过报价详情数据，可以分析报价确认率、拒绝原因、报价有效期、顾问报价情况等，支持业务决策。
6. **为后续功能提供基础**：报价详情页作为报价管理的核心页面，为后续的报价编辑、报价审核、报价统计等功能提供基础。

需求目标（说明该需求要解决的问题或达成的目标）：

1. **提供报价详情展示**：作为管理员查看单个报价详细信息的主要页面，全面展示报价的所有相关信息。
2. **展示报价基本信息**：展示报价单号、报价状态、关联需求、报价时间、有效期、创建顾问等基本信息，让管理员快速了解报价概况。
3. **展示客户信息**：展示客户的基本信息，包括客户名称、联系方式等，支持快速跳转到客户详情页。
4. **展示报价金额**：突出展示报价的合计金额，让管理员快速了解报价总额。
5. **展示报价明细**：以表格形式展示报价明细，包括每个服务项目的序号、名称、数量、单价、小计等，让管理员清晰了解报价构成。
6. **展示备注说明**：展示报价的备注说明信息，包括服务内容、完成时间、注意事项等，帮助管理员全面了解报价。
7. **展示客户操作记录**：展示客户对报价的操作记录，包括操作状态、有效期剩余时间等，让管理员了解报价的当前状态。
8. **支持页面导航**：提供返回按钮，支持管理员返回上一页面。
9. **支持快速跳转**：支持从报价详情页快速跳转到关联需求详情页、客户详情页和创建顾问详情页。
10. **支持复制报价单号**：提供复制报价单号功能，方便管理员快速复制报价单号用于其他用途。

用户故事（不同的视角下，希望的结果）：

**作为管理员，我希望：**
- 能够查看报价的完整信息，包括报价单号、报价状态、关联需求、报价时间、有效期、创建顾问等基本信息。
- 能够查看客户信息，包括客户名称、联系方式等，并能够快速跳转到客户详情页。
- 能够查看报价的合计金额，快速了解报价总额。
- 能够查看报价明细，了解每个服务项目的名称、数量、单价、小计，清晰了解报价构成。
- 能够查看报价的备注说明，了解服务内容、完成时间、注意事项等。
- 能够查看客户操作记录，了解报价的当前状态和有效期剩余时间。
- 能够复制报价单号，方便后续沟通和查询。
- 能够通过关联需求链接快速跳转到需求详情页。
- 能够通过客户信息链接快速跳转到客户详情页。
- 能够通过创建顾问链接快速跳转到顾问详情页。
- 能够通过返回按钮返回上一页面。

**作为业务顾问，我希望：**
- 能够快速查看自己创建的报价详情，了解报价的完整信息和客户操作情况。
- 能够通过报价详情页快速跳转到关联需求，了解需求的详细情况。
- 能够通过报价详情页快速跳转到客户详情，了解客户的详细情况。

**作为产品经理，我希望：**
- 报价详情页面能够提升管理员和业务顾问的报价管理效率，降低信息查找成本。
- 通过报价明细展示，建立透明的报价管理机制，提升报价管理的规范性。
- 通过快速跳转功能，支持管理员快速查看关联信息，提升信息查找效率。
- 报价详情页面作为报价管理的核心页面，能够引导管理员查看需求、查看客户等后续操作。

**作为业务方，我希望：**
- 通过报价详情功能，业务团队能够高效管理所有报价，提升报价处理效率。
- 通过报价详情数据，能够进行数据分析和报表制作，支持业务决策。
- 通过报价管理功能，能够更好地跟踪报价进度，提升业务转化率。

需求描述（详细阐述需求的行为逻辑、交互流程或后台规则）：

**1. 页面布局结构**
- 页面采用垂直布局，包含以下主要区域（从上到下）：
  - 返回按钮和标题区域（包含返回按钮和"报价详情"标题）
  - 报价单基本信息卡片（包含报价单号、报价状态、关联需求、报价时间、有效期、创建顾问、客户信息）
  - 报价金额区域（突出显示报价总额）
  - 报价明细区域（包含报价明细表格）
  - 备注说明区域（包含备注说明文本）
  - 客户操作记录区域（包含客户操作记录信息）

**2. 返回按钮和标题区域**
- 左侧显示返回按钮（箭头图标），点击后返回上一页面（通常是报价列表页或需求详情页）
- 右侧显示标题"报价详情"

**3. 报价单基本信息卡片**
- **报价单号**：
  - 显示报价单号，格式："QT" + 日期 + 序号（如：QT20240120001）
  - 提供复制按钮（复制图标），点击复制报价单号到剪贴板，显示成功提示
- **报价状态**：
  - 显示报价状态标签，不同状态不同颜色：
    - 待确认：黄色背景，黄色文字
    - 已确认：绿色背景，绿色文字
    - 已拒绝：红色背景，红色文字
    - 已过期：灰色背景，灰色文字
- **关联需求**：
  - 显示关联需求标题，可点击
  - 点击后跳转到需求详情页（requirement-detail.html?id=x），传递需求ID参数
- **报价时间**：
  - 显示报价创建时间，格式：YYYY-MM-DD HH:mm
- **有效期至**：
  - 显示报价有效期截止时间，格式：YYYY-MM-DD HH:mm
- **创建顾问**：
  - 显示创建顾问姓名，可点击
  - 点击后跳转到用户详情页（user-detail.html?id=x），传递用户ID参数
- **客户信息**：
  - 显示客户头像图标
  - 显示客户名称
  - 显示客户联系方式（部分隐藏，如：138****8888）
  - 客户信息区域可点击，点击后跳转到客户详情页（user-detail.html?id=x），传递客户ID参数

**4. 报价金额区域**
- 居中显示报价总额
- 显示标签"报价总额"
- 显示报价总额，字体很大，加粗，主色调
- 金额带千分位分隔符，格式：¥28,800

**5. 报价明细区域**
- 显示标题"报价明细"
- 使用表格形式展示报价明细
- 表头包含以下列：序号、项目名称、数量、单价、小计
- 表格内容：
  - 每行显示一个服务项目
  - 序号：显示序号（1、2、3等）
  - 项目名称：显示服务项目名称（如"UI设计"、"iOS开发"、"Android开发"）
  - 数量：显示数量，右对齐
  - 单价：显示单价，右对齐，格式：¥8,000（带千分位分隔符）
  - 小计：显示小计金额，右对齐，加粗，格式：¥8,000（带千分位分隔符）
  - 小计金额 = 数量 × 单价
- 合计行：
  - 显示在表格最后一行
  - 前四列合并，显示"合计"，右对齐
  - 最后一列显示合计金额，右对齐，格式：¥28,800（带千分位分隔符）
  - 合计金额 = 所有小计金额之和
- 数据来源：从后端获取报价明细数据，包括每个服务项目的名称、数量、单价、小计等

**6. 备注说明区域**
- 显示标题"备注说明"
- 显示报价的备注说明文本，支持多行显示
- 数据来源：从后端获取报价的备注说明数据
- 如果备注说明为空，不显示该区域或显示"暂无备注说明"提示

**7. 客户操作记录区域**
- 显示标题"客户操作记录"
- 操作记录展示：
  - 显示操作状态（如"等待客户确认"等状态文字）
  - 显示有效期信息（如"有效期剩余 X 天"）
- 数据来源：从后端获取客户操作记录数据，包括操作状态、有效期剩余时间等
- 如果客户操作记录为空，显示"暂无操作记录"提示

**8. 数据获取规则**
- **接口调用**：
  - 页面加载时，调用后端接口获取报价详情数据
  - 接口需要传递报价ID参数（从URL参数获取，如quotation-detail.html?id=1）
  - 接口需要传递当前登录用户的ID或token（用于权限验证）
  - 接口返回报价详情数据，包括：
    - 基本信息：报价ID、报价单号、关联需求ID、关联需求标题、报价时间、有效期、报价状态、创建顾问ID、创建顾问姓名等
    - 客户信息：客户ID、客户名称、客户联系方式等
    - 报价明细：服务项目列表，每个项目包括名称、数量、单价、小计等
    - 备注说明：备注说明文本
    - 客户操作记录：操作状态、有效期剩余时间等
- **数据更新**：
  - 页面支持刷新功能（可选），刷新时重新获取最新数据
  - 或提供刷新按钮，点击后重新加载数据
  - 报价状态可能会实时更新，需要支持实时刷新或定时刷新

**9. 页面跳转规则**
- **返回按钮**：点击返回按钮，返回上一页面（通常是报价列表页或需求详情页）
- **关联需求跳转**：点击关联需求标题，跳转到需求详情页（requirement-detail.html?id=x），传递需求ID参数
- **创建顾问跳转**：点击创建顾问姓名，跳转到用户详情页（user-detail.html?id=x），传递用户ID参数
- **客户信息跳转**：点击客户信息区域，跳转到客户详情页（user-detail.html?id=x），传递客户ID参数

**10. 复制功能**
- **复制报价单号**：
  - 点击报价单号右侧的复制图标，复制报价单号到剪贴板
  - 复制成功后，显示提示"已复制"（可以使用Toast提示）
  - 复制失败时，显示错误提示

**11. 空状态处理**
- **报价不存在时**：显示"报价不存在"错误提示，支持返回上一页面
- **报价明细为空时**：显示"暂无报价明细"提示（正常情况下不应出现）
- **备注说明为空时**：不显示备注说明区域，或显示"暂无备注说明"提示
- **客户操作记录为空时**：显示"暂无操作记录"提示

**12. 加载状态处理**
- 数据加载时，显示加载动画或骨架屏
- 加载失败时，显示错误提示和重试按钮
- 确保页面在各种加载状态下都能正常显示基本内容

**13. 异常处理**
- 网络请求失败时，显示友好的错误提示，支持重试
- 数据格式错误时，显示错误提示，不影响页面基本显示
- 报价不存在或无权访问时，显示错误提示，支持返回上一页面
- 确保页面在各种异常情况下都能正常显示基本内容

**14. 响应式设计**
- 页面支持响应式布局，适配不同屏幕尺寸
- 基本信息网格布局在移动端自动调整为单列显示
- 报价明细表格在移动端支持横向滚动
- 确保页面在各种屏幕尺寸下都能正常显示

**15. 交互体验**
- 所有可点击元素都有hover效果，提升交互体验
- 返回按钮hover时颜色变化
- 链接文字hover时颜色加深
- 复制图标hover时颜色变化
- 页面加载流畅，无卡顿现象

验收标准（列出明确、可验证的交付标准）：

**1. 页面布局验收**
- [ ] 返回按钮和标题区域正确显示，布局合理
- [ ] 报价单基本信息卡片正确显示，包含所有必需信息
- [ ] 报价金额区域正确显示，突出显示报价总额
- [ ] 报价明细区域正确显示，包含报价明细表格
- [ ] 备注说明区域正确显示，包含备注说明文本
- [ ] 客户操作记录区域正确显示，包含客户操作记录信息

**2. 报价单基本信息展示验收**
- [ ] 报价单号正确显示，复制图标正确显示
- [ ] 点击复制图标后，报价单号正确复制到剪贴板，并显示提示
- [ ] 报价状态标签正确显示，颜色与状态对应
- [ ] 关联需求正确显示，点击后正确跳转到需求详情页
- [ ] 报价时间正确显示，格式为YYYY-MM-DD HH:mm
- [ ] 有效期正确显示，格式为YYYY-MM-DD HH:mm
- [ ] 创建顾问正确显示，点击后正确跳转到用户详情页
- [ ] 客户信息正确显示，包含客户头像图标、客户名称、联系方式
- [ ] 点击客户信息区域后，正确跳转到客户详情页

**3. 报价金额展示验收**
- [ ] 报价金额区域正确显示
- [ ] 报价总额标签正确显示
- [ ] 报价总额正确显示，字体很大，加粗，主色调，带千分位分隔符
- [ ] 金额格式正确，带千分位分隔符

**4. 报价明细展示验收**
- [ ] 报价明细表格正确显示，包含表头和表格内容
- [ ] 表头正确显示，包含序号、项目名称、数量、单价、小计列
- [ ] 每个服务项目的序号、名称、数量、单价、小计正确显示
- [ ] 数量、单价、小计格式正确，带千分位分隔符
- [ ] 小计金额正确计算（数量 × 单价）
- [ ] 合计行正确显示，合计金额正确显示，带千分位分隔符
- [ ] 合计金额等于所有小计金额之和

**5. 备注说明展示验收**
- [ ] 备注说明标题正确显示
- [ ] 备注说明内容正确显示，支持多行显示
- [ ] 备注说明为空时，正确显示空状态提示或不显示该区域

**6. 客户操作记录展示验收**
- [ ] 客户操作记录标题正确显示
- [ ] 客户操作记录区域正确显示，包含图标和操作记录信息
- [ ] 操作状态正确显示
- [ ] 有效期信息正确显示，格式为"有效期剩余 X 天"
- [ ] 客户操作记录为空时，正确显示空状态提示

**7. 交互功能验收**
- [ ] 点击返回按钮后，正确返回上一页面
- [ ] 点击关联需求标题后，正确跳转到需求详情页
- [ ] 点击创建顾问姓名后，正确跳转到用户详情页
- [ ] 点击客户信息区域后，正确跳转到客户详情页
- [ ] 点击复制图标后，报价单号正确复制到剪贴板
- [ ] 所有可点击元素都有hover效果

**8. 数据获取验收**
- [ ] 页面加载时，正确调用后端接口获取报价详情数据
- [ ] 接口正确传递报价ID参数和用户身份信息
- [ ] 返回的数据正确解析和展示
- [ ] 数据加载时，正确显示加载状态
- [ ] 数据加载失败时，正确显示错误提示和重试按钮

**9. 空状态处理验收**
- [ ] 报价不存在时，正确显示"报价不存在"错误提示，支持返回上一页面
- [ ] 报价明细为空时，正确显示"暂无报价明细"提示
- [ ] 备注说明为空时，正确显示空状态提示或不显示该区域
- [ ] 客户操作记录为空时，正确显示空状态提示

**10. 异常处理验收**
- [ ] 网络请求失败时，正确显示错误提示，支持重试
- [ ] 数据格式错误时，正确显示错误提示
- [ ] 报价不存在或无权访问时，正确显示错误提示，支持返回上一页面
- [ ] 页面在各种异常情况下都能正常显示基本内容

**11. 响应式设计验收**
- [ ] 页面支持响应式布局，适配不同屏幕尺寸
- [ ] 基本信息网格布局在移动端自动调整为单列显示
- [ ] 报价明细表格在移动端支持横向滚动
- [ ] 页面在各种屏幕尺寸下都能正常显示

**12. 性能要求验收**
- [ ] 页面加载时间不超过2秒
- [ ] 页面滚动流畅，无卡顿现象
- [ ] 数据刷新响应及时，无明显延迟

**13. 数据准确性验收**
- [ ] 报价详情数据与数据库一致
- [ ] 报价明细数据与后端定义一致
- [ ] 合计金额计算正确，等于所有小计金额之和
- [ ] 报价状态与后端定义一致
- [ ] 时间信息正确显示，时区处理正确
- [ ] 金额格式正确，带千分位分隔符

**14. 交互体验验收**
- [ ] 所有可点击元素都有hover效果
- [ ] 返回按钮hover时颜色变化
- [ ] 链接文字hover时颜色加深
- [ ] 复制图标hover时颜色变化
- [ ] 页面加载流畅，无卡顿现象